<template>
  <div>
    <div class="box" v-if="comment.length != 0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list">
          <div class="pingjia">
            <div>
              <div class="footer"  v-for="(item,index) in comment" :key="index">
                <div class="user">
                  <div class="user-l">
                    <img class="user-touxiang" :src="item.avatar"/>
                    <div class="user-phone">
                      <div class="phone">{{item.mobile_phone}}</div>
                      <div class="xings" v-if="item.comment_rank == 1">
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                      </div>
                      <div class="xings" v-else-if="item.comment_rank == 2">
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                      </div>
                      <div class="xings" v-else-if="item.comment_rank == 3">
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                      </div>
                      <div class="xings" v-else-if="item.comment_rank == 4">
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                      </div>
                      <div class="xings" v-else-if="item.comment_rank == 5">
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                        <img class="xing" src="../../assets/img/mine/huangxing.png" />
                      </div>
                    </div>
                  </div>
                  <div class="user-r">
                    {{item.add_time}}
                  </div>
                </div>
                <div class="nr">
                  {{item.content}}
                </div>
              </div>
            </div>

          </div>
        </div>
      </van-list>
    </div>
    <div v-else>
      <p class="znawu">暂无评论</p> 
    </div>
  </div>
  
</template>

<script>
  export default {
    data() {
      return {
        goods_id:'',
        comment:[],
        // 分页
        loading: false,
        finished: false,
        page:1,
      }
    },
    created() {
      this.goods_id=this.$route.query.goods_id
      this.getlist(1)
    },
    mounted(){
      
    },
    methods: {
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.page+=1
          this.getlist(this.page)
        }, 500);
      },
      // 商品评论
      getlist(page){
        this.$get("api/gzh_index.php?action=goods_comment", {
          id:this.goods_id,
          page:page,
          limit:20
        }).then(res => { 
          console.log(res.data)
          this.loading=false
          if(page==1){
            if(res.data.length==0){
              //加载完毕
              this.finished=true
            }else{
              this.comment = res.data
            }
            if(res.data.length>0&&res.data.length<20){
              //加载完毕
              this.finished=true
            }
          }else{
            if(res.data.length==0){
              this.finished=true
            }else{
              for (const key in res.data) {
                this.comment.push(res.data[key])
              }
            }
            if(res.data.length>0&&res.data.length<20){
              this.finished=true
            }
              
          }
        }).catch(err => {
          
        });
      },
    },
  }
</script>

<style scoped>
.box{

}
.list{
  width: 100%;
}
.pingjia{
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #FAFAFA;
}
.footer{
  width: 100%;
}
.user{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-l{
  display: flex;
  align-items: center;
}
.user-l .user-touxiang{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-right: 18px;
  background: #ccc;
}
.user-l .user-phone{
  /* height: 100px; */
}
.user-phone .phone{
  font-size: 24px;
  color: #333;
}
.user-phone .xings{
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
.user-phone .xing{
  width: 12px;
  height: 12px;
  display : block ;
  margin-right: 10px;
}
.user-r{
  font-size: 24px;
  color: #ccc;
}
.nr{
  color: #333;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.znawu{
  font-size: 30px;
  text-align: center;
  margin-top: 150px;

}
</style>
<style >
  .van-list{
      height:95vh;
  }
</style>